<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>项目情况</title>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}">
    <style type="text/css">
        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: right;
        }
    </style>

    <script type="application/javascript" src="{% static 'js/echarts.js' %}"></script>
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'bootstrap/js/bootstrap.js' %}" type="text/javascript"></script>
    <script src="https://g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="txtName" class="col-md-2 col-sm-2 col-xs-2 control-label">机构</label>
                <div class="col-sm-4 col-md-4 col-xs-8">
                    <select class="form-control" required name="project_area">
                        {% for org in org_list %}
                            <option value="{{ org.id }}">{{ org.org_name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class=" col-md-2 col-sm-4" id="divPie" style="width: 400px;height:400px;margin-top: 30px">

        </div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('divPie'));

            option = {
                {% comment %}title: {
                    text: '项目进度情况统计',
                    subtext: '纯属虚构',
                    x: 'center'
                },{% endcomment %}
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['正常', '异常']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['立项', '招标', '可研', '施工', '竣工', '工代']
                },
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#61a0a8',  //圈圈的颜色
                                lineStyle: {
                                    color: '#d48265'  //线的颜色
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: {{ normal_count }}
                    },
                    {
                        name: '异常',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#d48265',  //圈圈的颜色
                                lineStyle: {
                                    color: '#c4ccd3'  //线的颜色
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideRight'
                            }
                        },
                        data: {{ abnormal_count }}
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </div>
</div>
</body>
</html>